<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500"></canvas>
<script>
    const canvas = document.getElementById("physicsCanvas");
    const ctx = canvas.getContext("2d");

    // Style settings
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    ctx.lineWidth = 2.5;
    ctx.font = "bold 20px serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Origin
    const ox = 250;
    const oy = 300;

    // Helper function to draw an arrow
    function drawArrow(fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // Draw Axes
    // z-axis
    drawArrow(ox, oy, ox, 50);
    ctx.fillText("z", ox, 35);

    // v-axis
    drawArrow(ox, oy, 450, oy);
    ctx.fillText("v", 465, oy);

    // x-axis
    drawArrow(ox, oy, 100, oy + 75);
    ctx.fillText("x", 90, oy + 85);

    // Draw Cylinder (Needle)
    const cylRadiusX = 18;
    const cylRadiusY = 7;
    const cylHeight = 60;
    const cylTopY = oy - cylHeight / 2;
    const cylBottomY = oy + cylHeight / 2;

    ctx.beginPath();
    ctx.ellipse(ox, cylBottomY, cylRadiusX, cylRadiusY, 0, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(ox - cylRadiusX, cylBottomY);
    ctx.lineTo(ox - cylRadiusX, cylTopY);
    ctx.moveTo(ox + cylRadiusX, cylBottomY);
    ctx.lineTo(ox + cylRadiusX, cylTopY);
    ctx.stroke();

    // Draw the top cap (front-facing arc)
    ctx.beginPath();
    ctx.ellipse(ox, cylTopY, cylRadiusX, cylRadiusY, 0, Math.PI, 2 * Math.PI);
    ctx.stroke();

    // Draw vector m inside the cylinder
    drawArrow(ox, oy + 10, ox, oy - 20);
    ctx.fillText("m", ox - 40, oy);

    // Draw vector H₀
    drawArrow(ox - 60, oy + 30, ox - 60, oy - 60);
    ctx.fillText("H", ox - 75, oy - 70);
    ctx.font = "bold 14px serif";
    ctx.fillText("0", ox - 67, oy - 65);
    ctx.font = "bold 20px serif"; // Reset font

    // Draw vector r
    const r_end_x = ox + 130;
    const r_end_y = oy - 100;
    drawArrow(ox, oy, r_end_x, r_end_y);
    ctx.fillText("r", r_end_x + 15, r_end_y - 5);

    // Draw angle θ
    const angle_radius = 50;
    const startAngle = -Math.PI / 2; // -90 degrees (positive z-axis)
    const endAngle = Math.atan2(r_end_y - oy, r_end_x - ox);
    ctx.beginPath();
    ctx.arc(ox, oy, angle_radius, startAngle, endAngle);
    ctx.stroke();

    // Position the theta symbol
    const theta_angle_mid = (startAngle + endAngle) / 2;
    const theta_x = ox + (angle_radius + 18) * Math.cos(theta_angle_mid);
    const theta_y = oy + (angle_radius + 18) * Math.sin(theta_angle_mid);
    ctx.fillText("θ", theta_x, theta_y);

    // Draw Figure Caption
    ctx.font = "bold 24px 'Times New Roman'";
    ctx.fillText("Fig. 2.56", ox, oy + 150);

</script>
</body>
</html>